<template>
	<view class="main">
		<image class="img_bg" :src="detail.banner" mode="aspectFit"></image>
		<view class="store">
			<image class="store_img" :src="detail.brandLogo" mode=""></image>
			<view class="tittle">
				<text class="tit-big">{{detail.name}}</text>
				<!-- <text class="tit-small">制造商直供</text> -->
				<text class="tit-icon">
					<!-- <image class="icon dz" src="../../static/img/6/6-4.png" mode="aspectFit"></image> -->
					<!-- 云南 -->
					<!-- <image class="icon hart" style="margin-left: 15%;" src="../../static/img/6/6-5.png" mode=""></image>
					100000 -->
				</text>
			</view>
			<view class="acction" @click="Collection" :class="{active: favorite}" v-if="!isCollect">
				+收藏
			</view>
			<view class="acction" @click="Collection" :class="{active: favorite}" v-if="isCollect">
				取消收藏
			</view>
		</view>
		<view class="store_font " v-html="detail.brandDesc"></view>
        <view class="navbar">
			<view class="nav-item" :class="{current: filterIndex === 0}" @click="tabClick(0)">
				相关商品 
			</view>
			<!-- <view class="nav-item" :class="{current: filterIndex === 1}" @click="tabClick(1)" >
				评价报告                
			</view> -->
			
			
		</view>
		<ListL v-show="falg == 0" :goodsList="goodsList"></ListL>
		<ListR v-show="falg == 1" :type="type"></ListR>


		
	</view>
</template>

<script>
	import ListL from "../../components/list/listOther.vue"
	import ListR from "../../components/brand-list/list.vue"
	export default {
		components: {
			ListL,
			ListR
		},
		data() {
			return {
				falg:0,
				cateMaskState: 0, //分类面板展开状态
				
				loadingType: 'more', //加载更多状态
				filterIndex: 0, 
				cateId: 0, //已选三级分类id
				priceOrder: 0, //1 价格从低到高 2价格从高到低
				cateList: [],
				goodsList: [],
				type:"image",
				detail:'',
				isCollect:false,
				type:1,
				brand_id:'',
				favorite:true

			}
		},
		async onLoad(options){
				this.$Request.post4(
					this.$api.httpApi.brand.brand, {
						brand_id:options.brand_id
					}
				).then(res => {
					if (res.code == 1) {
						console.log(res.data[0].name)
						this.detail = res.data[0]
				
					}else{
						
					}
				})
			this.brand_id = options.brand_id
			this.getlist(options.brand_id)
			
				
				
			
			
			
		
		
		},
		methods:{
			//收藏
			
			Collection(){
				let that = this;
				if(this.isCollect){
					this.type = 2
				}else{
					this.type = 1
				}
				this.$Request.post4(
					this.$api.httpApi.brand.collection + "&token=" + this.$SysCache.get('token'), {
						'type':1,
						'status':this.type,
						'uid':this.$SysCache.get('userInfo').id,
						'collected_id':this.$route.query.brand_id,
						// "token": this.$SysCache.get('token') || null,
					}
				).then(res => {
					console.log(res.data)
					if (res.code == 1) {
						this.getlist(this.brand_id)
				
					}
					
				})
				
			},
			
			
			getlist(brand_id){
				let that = this;
				that.$Request.post(
					that.$api.httpApi.search.search+"&token="+this.$SysCache.get('token'), {
						queryCondition: {
							order: [{
								fieldname: "iOrder",
								direction: "asc"
							}],
							pageindex: 1,
							pagesize: 12,
							where: [{
								fieldname: "brand_id",
								valuefrom: brand_id
							}]
						}
					}
				).then(res => {
					if (res.code == 200) {
						console.log(res.data.data)
				         that.goodsList = res.data.data
					}
				})
				
				if (this.$SysCache.get("token")) {
					this.$Request.post4(
						this.$api.httpApi.special.checkCollection, {
							type: 1,
							collected_id:this.brand_id,
							uid:this.$SysCache.get("userInfo").id
						}
					).then(res => {
						if (res.code == 1) {
							if(res.data.is_collected == 1){
								this.isCollect = true
							}else{
								this.isCollect = false
							}
							
						}
					})
				}
				
			},
			
			
			tabClick(index){
				console.log(index)
				this.falg = index
				if(this.filterIndex === index && index !== 2){
					return;
				}
				this.filterIndex = index;
				if(index === 2){
					this.priceOrder = this.priceOrder === 1 ? 2: 1;
				}else{
					this.priceOrder = 0;
				}
				this.isshow=true
				
				// uni.showLoading({
				// 	title: '正在加载',
				// 	'font-size':"28upx"
				// })
			},
			}
	}
</script>

<style lang="scss">
	page {
		background: #E9E9E9;
	}
.navbar{
		display: flex;
		width: 100%;
		height: 80upx;
		z-index: 10;
		margin-bottom: 20upx;
		.nav-item{
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			font-size: 30upx;
			color: #666666;
			position: relative;
			&.current{
				color: #4DC897;
				&:after{
					content: '';
					position: absolute;
					left: 50%;
					bottom: 0;
					transform: translateX(-50%);
					width: 120upx;
					height: 0;
					border-bottom: 4upx solid #4DC897;
				}
			}
		}
		.p-box{
			display: flex;
			flex-direction: column;
			.yticon{
				display: flex;
				align-items: center;
				justify-content: center;
				width: 30upx;
				height: 14upx;
				line-height: 1;
				margin-left: 4upx;
				font-size: 26upx;
				color: #fff;
				&.active{
					color: #4DC897;
				}
			}
			.xia{
				transform: scaleY(-1);
			}
		}
		.cate-item{
			display: flex;
			justify-content: center;
			align-items: center;
			height: 100%;
			width: 80upx;
			position: relative;
			font-size: 44upx;
			&:after{
				content: '';
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				border-left: 1px solid #ddd;
				width: 0;
				height: 36upx;
			}
		}
	}

	.img_bg {
		width: 100%;
		height:499upx ;

	}

	.store {
		display: flex;
		width: 90%;
		margin: -120upx auto 0;
		background: #fff;
		padding: 40upx;
		position: relative;
		z-index: 10;
	}

	.store_font {
		width: 90%;
		background: #fff;
		padding: 40upx;
		margin: 20upx auto;
		font-size: 28upx;
		color: #666666;
	}

	.store_img {
		width: 93upx;
		height: 93upx;
		border-radius: 50%;
	}

	.icon {
		vertical-align: middle;
		margin-right: 5upx;
	}
    .icon.dz{
		width:17upx;
		height:23upx;
	} 
	.icon.hart{
		width:23upx;
		height:24upx;
	}
	.tittle {
		width: 55%;
		padding-left: 20upx;
		.tit-big{
			font-size: 27upx;
		}
		.tit-small{
			width:117upx;
			height:34upx;
			text-align: center;
			line-height: 34upx;
			border-radius:10upx;
			font-size: 19upx;
			color: #fff;
			background: #4DC897;
		}
		.tit-icon{
			color: #999999;
			font-size: 29upx;
		}
	}

	.tittle text {
		display: block;
		margin-bottom: 10upx;
	}

	.acction {
		width: 170upx;
		text-align: center;
		line-height: 60upx;
		color: #fff;
		height: 60upx;
		background: rgba(77, 200, 151, 1);
		border-radius: 23px;
		font-size: 30upx;
		margin-top: 5%;
	}

	
	.f-header {
		display: none;
	}
</style>
